import React from 'react';
import {
  Box,
  Container,
  Typography,
  Grid,
  Card,
  CardContent,
  CardMedia,
  Button,
  Pagination,
  useTheme
} from '@mui/material';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { useGetArticlesQuery } from '../../store/services/articles';
import Loading from '../../components/common/Loading';

const Home: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const theme = useTheme();
  const [page, setPage] = React.useState(1);
  const { data, isLoading, error } = useGetArticlesQuery({
    page: page - 1,
    size: 9,
    sort: 'createdAt,desc'
  });

  if (isLoading) {
    return <Loading />;
  }

  if (error) {
    return (
      <Box sx={{ p: 3, textAlign: 'center' }}>
        <Typography color="error">
          {t('common.error')}
        </Typography>
      </Box>
    );
  }

  return (
    <Container maxWidth="lg" sx={{ py: 4 }}>
      {/* 头部标题 */}
      <Box sx={{ mb: 4, textAlign: 'center' }}>
        <Typography
          component="h1"
          variant="h3"
          color="text.primary"
          gutterBottom
        >
          {t('home.welcome')}
        </Typography>
        <Typography
          variant="h5"
          color="text.secondary"
          paragraph
        >
          {t('home.description')}
        </Typography>
      </Box>

      {/* 文章列表 */}
      <Grid container spacing={4}>
        {data?.content.map((article) => (
          <Grid item key={article.id} xs={12} sm={6} md={4}>
            <Card
              sx={{
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
                transition: 'transform 0.2s',
                '&:hover': {
                  transform: 'translateY(-4px)',
                  boxShadow: theme.shadows[4]
                }
              }}
            >
              <CardMedia
                component="img"
                height="200"
                image={article.cover || '/placeholder.jpg'}
                alt={article.title}
              />
              <CardContent sx={{ flexGrow: 1 }}>
                <Typography gutterBottom variant="h5" component="h2">
                  {article.title}
                </Typography>
                <Typography variant="body2" color="text.secondary" paragraph>
                  {article.summary}
                </Typography>
                <Box
                  sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    mt: 2
                  }}
                >
                  <Typography variant="caption" color="text.secondary">
                    {new Date(article.createdAt).toLocaleDateString()}
                  </Typography>
                  <Button
                    size="small"
                    color="primary"
                    onClick={() => navigate(`/articles/${article.id}`)}
                  >
                    {t('common.more')}
                  </Button>
                </Box>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>

      {/* 分页 */}
      {data && data.totalPages > 1 && (
        <Box sx={{ mt: 4, display: 'flex', justifyContent: 'center' }}>
          <Pagination
            count={data.totalPages}
            page={page}
            onChange={(_, value) => setPage(value)}
            color="primary"
          />
        </Box>
      )}
    </Container>
  );
};

export default Home; 